<template>
    <view class="activity-detail">
        <!-- 顶部图片 -->
        <scroll-view class="content-scroll" scroll-y>
            <image class="banner-image"
                :src="'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg'"
                mode="aspectFill"></image>

            <!-- 发布者信息 -->
            <view class="publisher-info">
                <image class="avatar" :src="'../static/img/album.png'" mode="aspectFill"></image>
                <view class="info">
                    <view class="name">戎么么 | 燕窝创业人</view>
                    <view class="time">2025-02-01 12:36:56 发布</view>
                </view>
            </view>

            <!-- 活动标题 -->
            <view class="activity-title">
                戎么么杭州线下群星计划发布会（服务商）
            </view>

            <!-- 活动时间地点 -->
            <view class="activity-info">
                <view class="info-item">
                    <text class="label">时间：</text>
                    <text class="value">2025年2月15-16日</text>
                </view>
                <view class="info-item">
                    <text class="label">地点：</text>
                    <text class="value">浙江省杭州市滨江网盛大厦</text>
                </view>
            </view>

            <!-- 活动内容 -->
            <view class="activity-content">
                <view class="content-title">内容</view>
                <view class="content-list">
                    <view class="content-item">1.群星计划线下讲解会</view>
                    <view class="content-item">2.戎么么系列产品专业学习</view>
                    <view class="content-item">3.渠道拓展以及资源案例整合</view>
                    <view class="content-item">4.线上<text class="plus">+</text>线下结合实战分享</view>
                    <view class="content-item">5.工作室产品实操SOP</view>
                </view>
                <view class="notice">
                    仅限服务商报名！限制参加人数200人左右！！
                </view>
            </view>

            <!-- 活动图片 -->
            <image class="content-image"
                :src="'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg'"
                mode="widthFix"></image>
            <image class="content-image"
                :src="'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg'"
                mode="widthFix"></image>
        </scroll-view>

        <!-- 固定底部 -->
        <view class="fixed-bottom">
            <view class="participants">
                <view class="avatar-group">
                    <image class="participant-avatar" :src="'../static/img/album.png'"></image>
                    <image class="participant-avatar" :src="'../static/img/album.png'"></image>
                </view>
                <text class="count">296人已报名</text>
            </view>
            <button class="back-btn" @tap="goBack">返回</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss">
.activity-detail {
    min-height: 100vh;
    background: #fff;
    position: relative;
    padding-bottom: 120rpx;

    .content-scroll {
        height: calc(100vh - 120rpx);
    }

    .banner-image {
        width: 100%;
        height: 400rpx;
    }

    .publisher-info {
        padding: 30rpx;
        display: flex;
        align-items: center;

        .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        .info {
            .name {
                font-size: 32rpx;
                color: #333;
                font-weight: bold;
                margin-bottom: 6rpx;
            }

            .time {
                font-size: 26rpx;
                color: #999;
            }
        }
    }

    .activity-title {
        padding: 0 30rpx;
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 30rpx;
    }

    .activity-info {
        padding: 0 30rpx;
        margin-bottom: 30rpx;

        .info-item {
            margin-bottom: 16rpx;
            font-size: 30rpx;
            color: #333;

            .label {
                color: #666;
            }
        }
    }

    .activity-content {
        padding: 0 30rpx;
        margin-bottom: 30rpx;

        .content-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
        }

        .content-list {
            .content-item {
                font-size: 30rpx;
                color: #333;
                margin-bottom: 16rpx;
                line-height: 1.5;

                .plus {
                    color: #2ed573;
                    font-weight: bold;
                    margin: 0 4rpx;
                }
            }
        }

        .notice {
            margin-top: 30rpx;
            font-size: 30rpx;
            color: #333;
            font-weight: bold;
        }
    }

    .content-image {
        width: 100%;
        margin-bottom: 40rpx;
    }

    .fixed-bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 120rpx;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

        .participants {
            display: flex;
            align-items: center;

            .avatar-group {
                display: flex;
                margin-right: 20rpx;

                .participant-avatar {
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                    border: 2rpx solid #fff;
                    margin-right: -20rpx;
                }
            }

            .count {
                font-size: 28rpx;
                color: #666;
            }
        }

        .back-btn {
            width: 400rpx;
            height: 80rpx;
            line-height: 80rpx;
            background: #2ed573;
            color: #fff;
            font-size: 32rpx;
            border-radius: 40rpx;
            margin: 0;
        }
    }
}
</style>
